<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>新能源汽车详细信息</title>
    <link href="../css/bootstrap.min.css" rel="stylesheet"/>
    <link href="../css/font-awesome.min.css" rel="stylesheet"/>
    <link href="../css/templatemo_main.css" rel="stylesheet"/>
    <link href="../css/element/index.css" rel="stylesheet"/>
    <link href="../css/quill.snow.css" rel="stylesheet"/>



    <style>
        .navbar-inverse{
            background-color: #428bca;
            border: none;
        }
        .logo h1{
            color: white;
        }

        .templatemo-submenu li a{
            margin-left: 35px;
        }

        [v-cloak]{
            display: none;
        }

    </style>
</head>
<body style="background-color: #E2E2E2;">
<div id="wrapper"  v-cloak>
    <div class="navbar navbar-inverse" role="navigation">
        <div class="navbar-header">
            <div class="logo"><h1>电动甄选</h1></div>
            <a href="/front/index.html">
                <i class="fa fa-desktop" style="color: white; font-size: 18px;margin-left:40px; ">

                </i>
            </a>
        </div>
        <div class="dropdown" style="display: inline-block;height: 100%;line-height: 50px;float: right;margin-right: 50px;font-size: 16px;">
            <div class="dropdown-toggle" data-toggle="dropdown"style="cursor: pointer;color: white;">
                <i class="fa fa-user" style="margin-right: 5px;font-size: 18px;"></i>{{user.name}}
                <span class="caret"></span>
            </div>
            <ul class="dropdown-menu" style="min-width: 120px;margin-left: -20px;">
                 <li><a href="javascript:void(0)"@click="personalPage"><i class="fa fa-user fa-fw"></i>个人信息</a></li>
                <li><a href="javascript:void(0)"@click="logout"> <i class="fa fa-sign-out fa-fw"></i>退出</a></li>
            </ul>
        </div>
    </div>
    <div class="template-page-wrapper">
        <div class="navbar-collapse collapse templatemo-sidebar">
            <ul class="templatemo-sidebar-menu" id="menu-id">
                <li><a href="index.html"><i class="fa fa-home"></i>首页 </a> </li>
                <li class="sub open">
                    <a href="javascript:;">
                        <i class="fa fa-navicon"></i>信息管理
                        <div class="pull-right"><span class="caret"></span></div>
                    </a>
                    <ul class="templatemo-submenu">
                        <li v-if="authority.indexOf(1) != -1">
                            <a href="adminInfo.html">管理员信息</a>
                        </li>
                        <li v-if="authority.indexOf(2) != -1">
                            <a href="workerInfo.html">工作人员信息</a>
                        </li>
                        <li v-if="authority.indexOf(3) != -1">
                            <a href="userInfo.html">用户信息</a>
                        </li>
                        <li v-if="authority.indexOf(4) != -1">
                            <a href="videoInfo.html">新能源汽车介绍</a>
                        </li>
                        <li v-if="authority.indexOf(5) != -1" class="active">
                            <a href="richtextInfo.html">新能源汽车详细信息</a>
                        </li>
                        <li v-if="authority.indexOf(6) != -1">
                            <a href="messageInfo.html">汽车论坛</a>
                        </li>
                        <li v-if="authority.indexOf(1000001) != -1">
                            <a href="noticeInfo.html">公告信息</a>
                        </li>
                        <li v-if="authority.indexOf(1000009) != -1">
                            <a href="typeInfo.html">商品类型信息</a>
                        </li>
                        <li v-if="authority.indexOf(1000010) != -1">
                            <a href="goodsInfo.html">商品详情信息</a>
                        </li>
                        <li v-if="authority.indexOf(1000011) != -1">
                            <a href="orderInfo.html">订单信息</a>
                        </li>
                        <li v-if="authority.indexOf(1000012) != -1">
                            <a href="commentInfo.html">评价信息</a>
                        </li>
                        <li v-if="authority.indexOf(1000013) != -1">
                            <a href="richtextInfoComment.html">汽车评论</a>
                        </li>
                        <li>
                            <a href="javascript:void(0)" @click="personalPage">个人信息</a>
                        </li>

                    </ul>
                </li>
                <li>
                    <a href="updatePassword.html"><i class="fa fa-unlock-alt"></i>修改密码 </a>

                </li>
                <li>
                    <a href="javascript:void(0)" @click="logout"><i class="fa fa-power-off"></i>退出登录 </a>

                </li>
            </ul>
        </div>
        <div class="templatemo-content-wrapper">
            <div class="templatemo-content">
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                新能源汽车详细信息表
                            </div>
                            <div class="panel-body">
                                <div class="table-responsive">
                                    <div class="nx-table-header">
                                        <botton class="btn btn-sm btn-primary" @click="add()">新增</botton>
                                        <input type="text" placeholder="请输入搜索内容" v-model="name" @keyup.enter="loadTable(1)">
                                        <i class="glyphicon glyphicon-search" @click="loadTable(1)"></i>
                                    </div>
                                    <table class="table table-striped table-bordered table-hover">
                                        <thead>
                                        <tr>
                                            <th>ID</th>
                                            <th>名称</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody v-for="obj in objs">
                                        <tr>
                                            <td>{{obj.id}}</td>
                                            <td>{{obj.name}}</td>
                                            <td>
                                                <button class="btn btn-primary btn-xs" @click="init(obj)">编辑</button>
                                                <button class="btn btn-danger btn-xs" @click="del(obj.id)">删除</button>
                                            </td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <ul class="pagination">
                                        <li class="page-item" v-bind:class="{disabled:preActive}">
                                            <a class="page-link" href="javascript:void(0)" @click="loadTable(pageInfo.pageNum - 1)">上一页</a>
                                        </li>
                                        <li class="page-item" v-if="pageInfo.pageNum > 1">
                                            <a class="page-link" href="javascript:void(0)" @click="loadTable(pageInfo.pageNum - 1)">{{pageInfo.pageNum - 1}}</a>
                                        </li>
                                        <li class="page-item disabled">
                                            <a class="page-link" href="javascript:void(0)">{{pageInfo.pageNum}}</a>
                                        </li>
                                        <li class="page-item" v-if="pageInfo.hasNextPage">
                                            <a class="page-link" href="javascript:void(0)" @click="loadTable(pageInfo.pageNum + 1)">{{pageInfo.pageNum + 1}}</a>
                                        </li>
                                        <li class="page-item" v-bind:class="{disabled:nextActive}">
                                            <a class="page-link" href="javascript:void(0)" @click="loadTable(pageInfo.hasNextPage?(pageInfo.pageNum + 1):pageInfo.pageNum)">下一页</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 模态框-->
<div class="modal" tabindex="-1" role="dialog" id="mod">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title">请填写信息</span>
                <button type="button" class="close" id="closeBtn">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <input type="hidden" id="modal-id">
                    <div class="form-group">
                        <label class="col-sm-3 control-label">名称</label>
                        <div class="col-sm-7">
                            <input type="text" class="form-control"placeholder="请输入名称" id="name">
                        </div>
                    </div>
                    <div id="editor" style="min-height: 300px;"></div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary"id="saveBtn">保存</button>
                <button type="button" class="btn btn-secondary"id="cancelBtn">关闭</button>

            </div>
        </div>
    </div>
</div>

<script src="../js/jquery.min.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script src="../js/templatemo_script.js"></script>
<script src="../js/my.js"></script>
<script src="../js/vue2.6.11/vue.min.js"></script>
<script src="../js/vue2.6.11/axios.js"></script>
<script src="../js/quill.js"></script>
<script src="../js/element/index.js"></script>
<script>
    function msg(type,msg) {
        Vue.prototype.$message({
            type: type,    //success(成功),warning(警告),error(错误)
            message: msg,
            duration: 1000,
            offset: 100,
            center: true
        })
    }
    let quill = new Quill('#editor',{
        theme: 'snow',
        modules:{
            toolbar:{
                container:[
                    [{'header':[1,2,3,4,5,6,false]}],            //标题字体
                    [{'font':[]}],                              //字体
                    ['bold','italic','underline','strike'],      //切换按钮
                    [{'align':[]}],                             //对齐方式
                    ['blockquote','code-block'],                //文本块，代码块
                    [{'list':'ordered'},{'list':'bullet'}],     //有序，无序列表
                    [{'indent':'-1'},{'indent':'+1'}],          //减速，增加缩进
                    [{'color':[]},{'background':[]}],           //字颜色，背景颜色
                    ['clean'],                                  //清除格式
                    ['image','link','video'],                   //图片，链接，视频



                ]
            }
        }
    });

   let wrapper = new Vue({
        el:"#wrapper",
        data:{
            user: {},
            authority: [],
            objs: [],    //查询的列表
            pageInfo: {},  //页面相关
            preActive: true, //上一页是否存在，true是不存在，false是存在
            nextActive: true, //下一页是否存在，true是不存在，false是存在
            name: '',         //查询的文件名称参数
            entity: {},
            permission: [],    //当前页面权限列表
            url: '',


        },
        created: function (){
            this.loadTable(1);
            this.user = JSON.parse(localStorage.getItem('user'));

            axios.get("/authority").then(res =>{
                if (res.data.code ==='0'){
                    this.authority =res.data.data;

                }else {
                    msg('error',res.data.msg);
                }
            });

            axios.get("/permission/5").then(res =>{
                if (res.data.code ==='0'){
                    this.permission =res.data.data;

                }else {
                    msg('error',res.data.msg);
                }
            });
        },
        methods: {
            //退出登录
            logout(){
                logout();
            },
            //新增
            add(){
                if (this.permission.indexOf(1) === -1){
                    msg('warning','您没有操作权限');
                    return;
                }
                $("#modal-id").val("");
                $("#name").val("")
                this.entity = {};
                quill.root.innerHTML = '';
                $('#mod').modal('show');
            },
            //查询列表
            loadTable(pageNum){
                let name = this.name === '' ? 'all':this.name;
                axios.get("/richtextInfo/page/"+name+"?pageNum="+pageNum).then(res =>{
                    if(res.data.code ==='0'){
                        this.objs = res.data.data.list;
                        this.pageInfo = res.data.data;
                        this.preActive = !(this.pageInfo.hasPreviousPage);
                        this.nextActive = !(this.pageInfo.hasNextPage);
                    }else {
                        msg('error',res.data.msg);
                    }
                });
            },
            //显示新增和编辑页面
            init(o){
                if (this.permission.indexOf(3) === -1){
                    msg('warning','您没有操作权限');
                    return;
                }
                $("#modal-id").val(o.id);
                $("#name").val(o.name)
                quill.root.innerHTML = o.content;
                $('#mod').modal('show');

            },
            //删除
            del(id){
                if (this.permission.indexOf(2) === -1){
                    msg('warning','您没有操作权限');
                    return;
                }
                let _this = this;
                _this.$confirm('确认删除？','系统提示',{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    cancelButtonClass:'btn-custom-cancel',
                    type:'warning'
                }).then(function (){
                    axios.delete("/richtextInfo/"+id).then(res =>{
                        if (res.data.code === '0'){
                            msg('success','删除成功');
                            $('#mod').modal('hide');
                            _this.loadTable(1);
                        } else {
                            msg('error',res.data.msg);
                        }
                    });
                }).catch(function (){
                    console.log('取消成功')
                })

            },

        }

    });

   $('#saveBtn').click(function (){
       let entity = wrapper.$data.entity;
       entity.name = $('#name').val();
       entity.content = quill.root.innerHTML;

       if (!$('#modal-id').val()){               //新增

           axios.post("/richtextInfo",entity).then(res =>{
                               if (res.data.code === '0'){
                                   msg('success','添加成功');
                                   $('#mod').modal('hide');
                                   wrapper.loadTable(1);
                               } else {
                                   msg('error',res.data.msg);
                               }
                           });
                       }else {                 //修改
                            entity.id = $('#modal-id').val();
                           axios.put("/richtextInfo",entity).then(res =>{
                               if (res.data.code === '0'){
                                   msg('success','更新成功');
                                   $('#mod').modal('hide');
                                   wrapper.loadTable(1);
                               } else {
                                   msg('error',res.data.msg);
                               }
                           });
                       }

   });
    $('#cancelBtn').click(function (){
        $('#mod').modal('hide');
    });
    $('#closeBtn').click(function (){
        $('#mod').modal('hide');
    });
</script>
</body>
</html>






























